@import '../../../style/root.scss';
@include tip;
.container{
    background: $white-grey;
}
.scroll{
    height: 100vh;
}
.scroll-box{
    @include padding-box(0 30rpx);
}
.top{
    margin-top: 30rpx;
    @include padding-box(30rpx 30rpx 70rpx 30rpx);
    background: #ffffff;
    border-radius: 16rpx 16rpx 0 0;
    .top-box{
        @include space-between;
        .title{
            font-weight: 600;
            color: $black;
            font-size: $font-normal;
        }
        .browse{
            color: $green;
            font-size: $font-small;
            display: flex;
            flex: none;
            .arrow{
                width: 35rpx;
                height: 36rpx;
            }
        }
    }
    .tips{
        @include padding-box(3rpx 14rpx);
        color: $green;
        font-size: 24rpx;
        border-radius: 18rpx;
        border: 1rpx solid #00D679;
        margin-top: 12rpx;
        position: absolute;
    }
}
.head-btn.long {
    border-radius: 0 0 16rpx 16rpx;
}
.head-btn{
    position: relative;
    z-index: 1;
    color: rgba(148, 151, 177, 1);
    margin: 0 auto;
    background: rgba(32, 37, 54, 0.9);
}
.head-btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 344rpx;
}
.line {
    width: 2rpx;
    height: 40rpx;
    background: #A6A8AF;
}
 
.info{
    @include space-between;
    @include padding-box(0 0 0 13rpx);
    .common{
        color: $grey;
        font-size: $font-mini;
    }
}
// .search{
//     border-radius: 34rpx;
//     background: #FFFFFF;
//     display: flex;
//     align-items: center;
//     @include padding-box(13rpx 30rpx);
//     margin-top: 26rpx;
//     .search-icon{
//         width: 40rpx;
//         height: 40rpx;
//     }
//     .input{
//         margin-left: 9rpx;
//         width: 100%;
//         font-size: 28rpx;
//     }
// }

.search-box{
    padding: 3vw 0;
}
.search-box .search-input{
    background: #FFFFFF;
    height: 67rpx;
}
.search-box .search-icon{
    left: 30rpx;
}
.contract-i{
    @include padding-box(30rpx);
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    margin: 24rpx 0;
    border-radius: 8rpx;
    .info{
        padding: 0;
        .portrait{
            width: 98rpx;
            height: 98rpx;
            border-radius: 50%;
            flex: none;
        }
    }
    .type{
        color: $red;
        font-size: $font-mini;
        display: flex;
        flex: none;
        margin-top: 30rpx;
        height: 1rpx;
        align-items: center;
        .again-btn{
            width: 108rpx;
            height: 50rpx;
            background: $green;
            border-radius: 25rpx;
            border: 1rpx solid #00D679;
            line-height: 50rpx;
            text-align: center;
            margin-left: 13rpx;
            color: #ffffff;
            font-size: 21rpx;
            font-weight: 400;
        }
    }
    .type-active{
        text-align: right;
        flex: none;
        position: relative;
        .time{
            position: relative;
            color: #9497B1;
            font-size: 24rpx;
        }
    }
}
.info-box{
    margin-left: 20rpx;
    flex: none;
    .flot{
        display: flex;
        .left{
            font-size: $font-mini;
            color: $grey;
            text{
                width: 96rpx;
                display: inline-block;
                text-align: justify;
                text-align-last: justify;
            }
        }
        .right{
            font-size: $font-mini;
            color: $black;
        }
    }
    .info-msg,.info-id{
        margin-top: 10rpx;
    }
}
.info-name{
    display: flex;
    align-items: center;
    .left-name{
        color: #141F33;
        font-size: $font-normal;
    }
    .sex{
        width: 30rpx;
        height: 30rpx;
        margin-left: 10rpx;
    }
}
.wages{
    height: 108rpx;
    @include padding-box(0 30rpx);
    background: #ffffff;
    border-radius: 0 0 16rpx 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;
}

.wages-left{
    display: flex;
    justify-content: center;
    align-items: center;
    .title{
        font-size: $font-small;
        margin-left: 10rpx;
        font-weight: 500rpx;
    }
    .img{
        width: 40rpx;
        height: 40rpx;
    }
}
.wages-right{
    display: flex;
    justify-content: center;
    align-items: center;
    .num{
        font-size: $font-small;
        font-weight: 600;
    }
    .img{
        width: 35rpx;
        height: 36rpx;
    }
}
  
